import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import Psd from '@/assets/icon/psd.svg';
import Email from '@/assets/icon/change-email.svg';
import {Cell, Text, useAppTheme} from 'tsun-smart-ui';
import Logo from '@/components/Logo';

const AccountSecurityScreen = ({
  navigation,
}: ReactNavigation.RootStackScreenProps<'AccountSecurity'>) => {
  const {t} = useTranslation();
  const theme = useAppTheme();

  return (
    <View className="flex-1">
      <View className="mt-2 mx-4">
        <Text className="mb-2">
          {t('userSetting.tab.securitySettings', {defaultValue: '安全设置'})}
        </Text>
        <View className="rounded-lg">
          <Cell
            size="large"
            data={[
              {
                left: (size: number) => (
                  <Logo name="email" size={18} containerSize={size} backgroundColor={theme.colors?.brand?.primaryLight!} color={theme.colors?.brand?.primary!} />
                ),
                title: t('userSetting.modifyBoundEmail', {
                  defaultValue: '修改绑定邮箱',
                }),
                description: t('message.emailAdress.changeBound', {
                  defaultValue: '更改当前账户绑定的邮箱地址',
                }),
                onPress() {
                  navigation.navigate('ChangeEmail');
                },
              },
              {
                left: (size: number) => <Logo name="password" size={18} containerSize={size} backgroundColor={theme.colors?.brand?.primaryLight!} color={theme.colors?.brand?.primary!} />,
                title: t('user.changePsd', {defaultValue: '修改密码'}),
                description: t('message.password.change', {
                  defaultValue: 'message.password.change',
                }),
                onPress() {
                  navigation.navigate('ChangePassword');
                },
              },
            ]}></Cell>
        </View>
      </View>
      <Text className="mx-4 mt-5" style={{color: theme.colors?.error?.primary}}>
        {t('common.secure.tip')}
      </Text>
      <Text
        className="mx-4 mt-1"
        variant="caption"
        style={{
          color: theme.colors?.neutral?.primary,
        }}>
        {t('userSetting.security.tip')}
      </Text>
    </View>
  );
};

export default AccountSecurityScreen;
